import React from 'react'
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack'
import QueueAnim from 'rc-queue-anim'

class GrowthPath extends React.PureComponent {
  render () {
    const {...props} = this.props
    const {dataSource} = props
    delete props.dataSource
    delete props.isMobile
    return (
      <OverPack {...props} {...dataSource.OverPack}>
        <QueueAnim
          type="bottom"
          leaveReverse
          key="page"
          delay={[0, 100]}
          {...dataSource.titleWrapper}
        >
          {dataSource.titleWrapper.children.map((item, i) =>
            React.createElement(
              item.name.indexOf('title') === 0 ? 'h2' : 'div',
              {key: i.toString(), ...item},
              typeof item.children === 'string' &&
              item.children.match(/\.(svg|gif|jpg|jpeg|png|JPG|PNG|GIF|JPEG)$/)
                ? React.createElement('img', {src: item.children, alt: 'img'})
                : item.children
            )
          )}
          <img width='60%'
               src='https://s3.cn-north-1.amazonaws.com.cn/tws-upload/images/temp/1552036257028-893415b8-203d-4c31-a3bb-457ea4ad698d.jpg'/>
        </QueueAnim>
      </OverPack>
    )
  }
}

export default GrowthPath
